<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>

    <style>
        div{
            background-color: aqua;

             /* 盒模型宽度 */
            width: 500px;
            /* 盒模型高度 */
            height: 300px;
        }
       
        
    </style>
</head>
<body>
    <!-- 
        盒模型  box-model
        1.盒模型长什么样？
            css中所有的元素都是设置成为了一个矩形
            将盒子设置成矩形的目的是为了方便在页面中布局，布局就是调整盒子在页面中不同的位置。
        2.每一个盒模型都由4个部分组成
            1)内容区域  content
            2)边框区域  border
            3)内边距区域  padding
            4)外边距区域  margin
     -->

     <!-- 内容区域 content
        内容区域是用来存放元素内容所占的范围区域
        内容区域只由 width 和 heigth 决定
        块元素默认的内容区域宽度是与父元素的宽度保持一致 高度是根据内容高度所决定
        改变宽度只是改变元素视觉大小，并没有改变它所占的区域，它还是会填满一整行。
        当内容区域超出内容区域以后，内容区域元素不会影响页面布局。
      -->
      <div>
        <!-- div是块元素，没有语义，写出的文字与普通文字没有区别 -->
        这是块元素
      </div>
      
</body>
</html>